<template>
  <div class="bg-f2">
    <!-- Echarts 图标 -->
    <div style="position: relative" class="bg-f2 bg-fff">
      <div style="font-size: 16px;color:'#2F3033;position:absolute;z-index:90;left: 15px;top: 15px;">故障状态</div>
      <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
      <el-row class="t_container" v-else>
        <!-- 未生成工单 -->
        <el-col :span="8">
          <qwzj-pie v-if="!pieFlag || !reload_pie" :index="0" :pieData="pieData" :pieDataType="0" :pageType="'faultReportList'" />
        </el-col>
        <!-- 已生成工单 -->
        <el-col :span="8">
          <qwzj-pie v-if="!pieFlag || !reload_pie" :index="1" :pieData="pieData" :pieDataType="1" :pageType="'faultReportList'" />
        </el-col>
        <!-- 已解决 -->
        <el-col :span="8">
          <qwzj-pie v-if="!pieFlag || !reload_pie" :index="2" :pieData="pieData" :pieDataType="2" :pageType="'faultReportList'" />
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="b bg-f2 bg-fff">
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
        <el-form-item label="资产类型:">
          <el-cascader v-model.trim="searchCriteria.zicanglx" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable class="zidainWidth"></el-cascader>
        </el-form-item>
        <el-form-item label="故障状态:">
          <el-select v-model="searchCriteria.isGZ" class="inputWidth" clearable placeholder="请选择">
            <el-option label="未生成" value="0"></el-option>
            <el-option label="已生成" value="1"></el-option>
            <el-option label="已解决" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报障时间:">
          <el-date-picker
            v-model="searchCriteria.dataTime"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" icon="el-icon-download" :underline="false" :href="exportBtn()" target="_blank">导出</el-link>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        stripe
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column prop="zcmc" label="资产名称" sortable :show-overflow-tooltip="true" min-width="150"></el-table-column>
        <el-table-column prop="zclxmc" label="资产类型" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-html="getsblx(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column label="安装地址" min-width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.zcsfmc + scope.row.zccsmc + scope.row.zcqxmc + scope.row.zcjdmc + scope.row.xxdz }}</template>
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" min-width="120"></el-table-column>
        <el-table-column prop="lxmcs" label="故障类型" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.lxmcs + '/' + scope.row.wtlxmc }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gzms" label="故障描述" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.gzms }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tjsj" label="报障时间" sortable="custom" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.tjsj | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sfscgd" label="故障状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="faultState[scope.row.sfscgd].tagType">{{ faultState[scope.row.sfscgd].tagText }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12"> </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="sizes,total,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import qwzjPie from '@/components/Echarts/qwzjPie' // echarts图表
import { yeWu, ziC } from '@/utils/allUrl'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
export default {
  components: { qwzjPie, echartsLoad },
  data() {
    return {
      //  0 未生成,1 已生成,2 '已解决'
      faultState: [
        { tagType: 'info', tagText: '未生成' },
        { tagType: '', tagText: '已生成' },
        { tagType: 'success', tagText: '已解决' },
      ],
      zicanOptions: [], // 资产类型
      currentPage: 1, // 页码
      total: 0, // 总条数
      pageSize: 10, // 每页显示的条目数
      searchCriteria: {
        zicanglx: '', // 资产类型
        isGZ: '', // 故障状态
        dataTime: '', // 报障时间
        namer: '',
      },
      tableData: [],
      wtbmdjs: 1,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      notGenerated: 0, // 未生成
      generated: 1, // 已生成
      solved: 2, // 已解决
      tableLoad: false,
      listQuery: {
        sortby: '',
        order: '',
      },
      city: '',
      cityLevel: 0,
      pieData: [],
      pieFlag: false,
      tableMessage: '',
      tableTimer: null,
      pieTimer: null,
      reload_pie: false,
      countListData: {
        type: '主机',
        url: 'wtjs/selectWTId', // 请求路径
        xianqingID: '', // 详情ID
        contractDialogVisible: false,
        contractDetailList: [], // 故障详情
      },
      grayIcon: ['zhuji_hui', 'kakou_hui', 'dzjc_hui'],
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
  },
  created() {
    this.getzican() // 获取资产
    this.initPie()
    this.initList()
  },
  methods: {
    // 获取资产类型
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        return this.$message({
          type: 'error',
          message: '资产' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    // 故障状态echarts图标
    async initPie() {
      clearTimeout(this.pieTimer)
      this.pieFlag = true
      const { data: res } = await this.$http.post(yeWu + 'report/getFaultType')
      this.pieFlag = false
      switch (res.code) {
        case '0000':
          this.pieData = res.data.list
          break
        case '0013':
          this.pieData = [
            { sfscgd: 0, count: 0 },
            { sfscgd: 1, count: 0 },
            { sfscgd: 2, count: 0 },
          ]
          break
        default:
          this.reload_pie = true
          this.pieData = [
            { sfscgd: 0, count: 0 },
            { sfscgd: 1, count: 0 },
            { sfscgd: 2, count: 0 },
          ]
          break
      }
    },
    // 故障状态echarts图标-刷新
    refreshPie() {
      this.reload_pie = false
      this.initPie()
    },
    // 初始化列表
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('M_', this.currentPage) // 当前页
      params.append('N_', this.pageSize) // 每页显示行数
      if (Array.isArray(this.searchCriteria.dataTime)) {
        params.append('BZSJS', this.searchCriteria.dataTime[0]) // 报障时间-开始时间
        params.append('BZSJE', this.searchCriteria.dataTime[1]) // 报障时间-结束时间
      }
      params.append('zclx', this.searchCriteria.zicanglx) // 资产类型
      params.append('SFSCGDS', this.searchCriteria.isGZ) // 故障状态
      params.append('ZCMC', this.searchCriteria.namer) // 设备名称,IP条件
      const { data: res } = await this.$http.post(`${yeWu}gz/selectGuZhang`, params)
      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.tableData = res.data.list
          this.total = res.data.countList
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    // 获取资产类型
    getsblx(row) {
      return `<span>${row.zclxmc1 ? row.zclxmc1 + ' / ' : ''}</span>
                <span>${row.zclxmc2 ? row.zclxmc2 + ' / ' : ''}</span>
                <span>${row.zclxmc}</span>`
    },
    // 查询按钮
    onSubmit() {
      this.currentPage = 1
      this.pageSize = 10
      this.initList() // 加载列表
    },
    exportBtn() {
      return `${yeWu}report/guZhangExcel`
    },
    // 当前页面显示条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.initList() // 加载列表
    },
    // 切换页面
    handleCurrentChange(val) {
      this.currentPage = val
      this.initList() // 加载列表
    },
    // 排序
    sortthiscolumn(column) {
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.initList()
    },
    // 判断是不是数组
    isArray(arg) {
      if (!Array.isArray) {
        Array.isArray = function (arg) {
          return Object.prototype.toString.call(arg) === '[object Array]'
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.b {
  margin-top: 15px;
}
.el-form-item {
  margin-bottom: 15px;
}
.el-tag {
  line-height: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 400;
}
// ::v-deep .el-form-item__content {
//   line-height: normal;
// }
</style>
